<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>

    </div>
</template>

<script setup lang="ts" name="Person">//作用：配组合式API
    import {ref} from 'vue'//   new!!!

    //数据，不能用this
    let name = ref("张三")//此时的name不是响应式的//    new!!!
    let age = ref(18)//此时的age不是响应式的//  new!!!
    let tel = 13888888888//此时的tel不是响应式的
    //方法
    function changeName(){
        name.value = "zhang-san"//  new!!!
    }
    function changeAge(){
        age.value +=1//  new!!!
    }
    function showTel(){
        alert(tel)
    }
    //不用写return
</script>

<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
</style>